<template>
  <div class="app-container">
    <div class="main-content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="管理后台端配置" name="pc">
          <el-form ref="pc" :model="config.pc.form" :rules="config.pc.rules" label-width="150px">
            <el-form-item label="公司名称" prop="scenicName">
              <el-input placeholder="请输入公司名称" v-model="config.pc.form.scenicName" />
            </el-form-item>
            <el-form-item label="网站名称" prop="webSiteName">
              <el-input placeholder="请输入网站名称" v-model="config.pc.form.webSiteName" />
            </el-form-item>

            <el-form-item label="网站关键字">
              <el-input placeholder="请输入" v-model="config.pc.form.keyword" />
            </el-form-item>

            <el-form-item label="网站描述">
              <el-input placeholder="请输入" v-model="config.pc.form.describe" />
            </el-form-item>

            <el-form-item label="网站ICON">
              <image-upload v-model="config.pc.form.icon" :fileSize="0.1" :limit="1" />
            </el-form-item>

            <el-form-item label="网站logo">
              <image-upload v-model="config.pc.form.logo" :fileSize="1" :limit="1" />
            </el-form-item>

            <el-form-item label="导航栏背景">
              <image-upload v-model="config.pc.form.navbarBackground" :fileSize="1" :limit="1" />
            </el-form-item>

            <el-form-item label="工具栏背景">
              <image-upload v-model="config.pc.form.sidebarBackground" :fileSize="1" :limit="1" />
            </el-form-item>
            <el-form-item label="登录页背景图">
              <image-upload v-model="config.pc.form.background" :fileSize="1" :limit="1" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { updateConfigByKey } from '@/api/system/config'

export default {
  name: 'Basics',
  props: {},
  data() {
    return {
      activeName: 'pc',
      config: {
        pc: {
          configKey: 'sys.pc.base.config',
          form: {
            scenicName: '', //景区名称
            webSiteName: '', //网站名称
            keyword: '', //网站关键词
            describe: '', //网站描述
            logo: '', //网站logo
            icon: '', //网站icon
            background: '', //登录页背景图
            navbarBackground: '', //导航栏背景
            sidebarBackground: '', //工具栏背景
          },
          rules: {
            webSiteName: [{ required: true, message: '请输入网站名称', trigger: 'blur' }],
          },
        },
      },
    }
  },
  created() {
    this.getConfigValue()
  },
  methods: {
    getConfigValue() {
      let _config = this.config[this.activeName]
      this.getConfigKey(_config.configKey).then((res) => {
        _config.form = { ..._config.form, ...JSON.parse(res.data) }
      })
    },
    handleClick(tab, event) {
      console.log(tab)
      this.getConfigValue()
    },
    resetForm() {
      let form = this.config[this.activeName].form
      for (let key in form) {
        form[key] = null
      }
    },
    submitForm() {
      let _config = this.config[this.activeName]
      this.$refs[this.activeName].validate((valid) => {
        if (valid) {
          updateConfigByKey({
            configKey: _config.configKey,
            configValue: JSON.stringify(_config.form),
          }).then((res) => {
            this.$modal.msgSuccess('修改成功')
            this.getConfigValue()
          })
        } else {
          return false
        }
      })
    },
  },
}
</script>
